<template>
    <div>
        <cvue-dialog
            :dialogVisible="addRoomVisible"
            title="添加房间"
            :isShowFoot="true"
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody">
                <div class="left-con">
                    <el-tree
                    ref="addRoomTree"
                        :props="{
                            children: 'children',
                            label: 'name'
                        }"
                        node-key='detailId'
                        :data="buildFreeTree"
                        show-checkbox
                        @check='check'
                        :default-expand-all='true'
                        >
                    </el-tree>
                </div>
                <div class="right-con">
                     <el-table
                        ref="addRoomTable"
                        :data="buildFreeRoomList"
                        tooltip-effect="dark"
                        style="width: 100%"
                       @select="select"
                       @select-all='selectAll'
                       @row-click="rowClick"
                   >
                        <el-table-column
                        type="selection"
                        width="55">
                        </el-table-column>
                        
                        <el-table-column
                        prop="name"
                        label="房间"
                        width="120">
                        </el-table-column>
                    </el-table>
                   
                </div>
                <div class="clear"></div>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import makeTree from '@/util/makeTree'
export default {
    components: {
        cvueDialog
    },
    computed: {
        addRoomVisible () {
            return this.$store.state.dorm.addRoomVisible
        },
        buildFreeTree () {
          return this.$store.state.dorm.buildFreeTree
        },
        buildFreeRoomList () {
          return this.$store.state.dorm.buildFreeRoomList
        },

         curDorm () {
            return this.$store.state.dorm.curDorm    
        },
        schoolId () {
          return this.$store.getters.cookiesObj.schoolId
        }
    },
    data () {
        return {
           selectedList: []
        }
    },
    methods: {
       
        openDialog () {
           this.getRoomFree()
        },
        confirmDialog () {
          var data = this.$refs.addRoomTree.getCheckedNodes(false, true)
          var temp = {}
          var list = []
          for (var item of data) {
             if (item.grade == 2) {
                 temp = item
                 item.floorNo = temp.name
                 item.bingingType = 4
                 list.push(item)
              }
            if (item.grade == 3) {
              item.floorNo = temp.name
               item.bingingType = 6
              list.push(item)
            }
          }
          var params = list.map(obj => {
            return {
              dormitoryId: this.curDorm.id,
              name: obj.name,
              buildDetailId: obj.detailId,
              floorNo: obj.floorNo,
              bingingType: obj.bingingType
            }
          }) 
           
            this.$store.dispatch('room/batchCreate', params).then(res => {
                this.$message.success('添加成功')
                this.$store.dispatch('room/getRoom', {
                    PageNum: 1
                })
            })
            this.closeDialog()
        },
        closeDialog () {
          this.$store.state.dorm.addRoomVisible = false
          this.$store.state.dorm.buildFreeTree = []
        },
        check (a, b, c) {
          // debugger
          // console.log(b.checkedNodes)
          var list = []
          for (var item of b.checkedNodes) {
            if (item.grade == 3) {
              list.push(item)
            }
          }
          console.log(list)
          this.$refs.addRoomTable.clearSelection()
          for (var row of list) {
            this.$refs.addRoomTable.toggleRowSelection(row)
          }
        },
        
          rowClick (row, column, event) {
            this.$refs.addRoomTable.toggleRowSelection(row)

            this.select(null, row)
        },
        select (a, b, c) {
           var treeSelected = this.$refs.addRoomTree.getCheckedNodes(false, true)
           var isHave = false
           for (var item of treeSelected) {
             if (item.detailId == b.detailId) {
               isHave = true
             } 
           }
           if (isHave) {
             this.$refs.addRoomTree.setChecked(b, false)
           } else {
             this.$refs.addRoomTree.setChecked(b, true)
           }
        },
        selectAll (a, b, c) {
          if (a.length == 0) {
            var treeSelected = this.$refs.addRoomTree.getCheckedNodes(false, true)
            for (var item of treeSelected) {
              if (item.grade == 3) {
                this.$refs.addRoomTree.setChecked(item, false)
              }
            }
          } else {
            for (var node of a) {
              if (node.grade == 3) {
                this.$refs.addRoomTree.setChecked(node, true)
              }
            }
          }
        },
        getRoomFree () {
          var params = {
            SchoolId: this.schoolId,
            IsShowNew: true,
            DormitoryId: this.curDorm.id
          }
          
          this.$store.dispatch('dorm/getRoomFree', params)
        }
    }
}
</script>
<style scoped>
.left-con{float: left;width: 30%;}
.right-con{float: left;width: 70%;}
.clear{clear: both;}
</style>
